<!-- 我的钱包 -->
<template>
  <view class="wallet-wrap">
    <!-- 钱包卡片 -->
    <view class="head_box u-flex u-row-center u-col-center">
      <view class="card-box">
        <view class="card-head u-flex u-col-center">
          <view class="card-title u-m-r-10">可提现金额（元）</view>
          <u-icon @click="showMoney = !showMoney" :name="showMoney ? 'eye-fill' : 'eye-off'" size="46" color="#fff">
          </u-icon>
        </view>
        <view class="money-num u-p-t-50">{{ showMoney ? list.now_money || '0.00' : '***' }}</view>
        <button class="u-reset-button withdraw-btn" @tap="$Router.push('/pages/user/wallet/recharge')">充值</button>
        <view class="card-head u-flex u-col-center" style="margin-top: 40rpx;">冻结金额:{{list.ten_prize_money}}</view>
      </view>
    </view>
    <!-- 奖励 -->
    <view class="reward">
      <view class="left_group">
        <view class="">
          今日拼购奖励
        </view>
        <view class="money">
          ￥{{list.return_prize}}
        </view>
      </view>
      <view class="left_group">
        <view class="">
          今日助力红包
        </view>
        <view class="money">
          ￥{{list.direct_prize}}
        </view>
      </view>
      <view class="left_group">
        <view class="">
          累计助力红包
        </view>
        <view class="money">
          ￥{{list.direct_all_prize}}
        </view>
      </view>
    </view>
    <!-- 筛选 -->
    <u-sticky offset-top="0" :enable="true">
      <view class="filter-box u-flex u-row-between">
        <!-- <button class="u-reset-button date-btn" @tap="showCalendar = true">
					{{ selDateText }}
					<u-icon class="u-m-l-20" name="arrow-down-fill" size="28" color="#e5e5e5"></u-icon>
				</button> -->
        <!-- <view class="total-box">收入￥{{ incomeMoney || '0.00' }} 支出￥{{ expendMoney || '0.00' }}</view> -->
      </view>
      <!-- 状态分类 -->
      <view class="u-flex nav-box">
        <view class="state-item u-flex-1 " v-for="(state, index) in statusList" :key="state.value"
          @tap="onTab(state.value)">
          <text class="state-title" :class="{ 'title-active': stateCurrent === state.value }">{{ state.name }}</text>
          <text class="underline" :class="{ 'underline-active': stateCurrent === state.value }"></text>
        </view>
      </view>
    </u-sticky>

    <!-- 钱包记录 -->
    <view class="wallet-list u-flex" v-for="item in walletLog" :key="item.id">
      <image class="head-img u-m-r-20" :src="item.avatar" mode=""></image>
      <view class="list-content">
        <view class="title-box u-flex u-row-between">
          <text class="title u-ellipsis-1">{{ item.memo }}{{ item.title ? '-' + item.title : '' }}</text>
          <view class="money">
            <text v-if="item.status === 1" class="add font-OPPOSANS">+{{ item.money }}</text>
            <text v-else class="minus font-OPPOSANS">-{{ item.money }}</text>
          </view>
        </view>
        <!-- <text class="time">{{ $u.timeFormat(item.createtime, 'yyyy-mm-dd hh:MM') }}</text> -->
        <text class="time">{{ item.createtime}}</text>
      </view>
    </view>
    <!-- 空置页 -->
    <shopro-empty v-show="isEmpty" marginTop="200rpx" image='../../../static/images/empty/no_data.png' tipText="暂无数据~">
    </shopro-empty>
    <!-- 更多 -->
    <!-- <u-loadmore v-if="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" /> -->
    <!-- 日期选择 -->
    <u-calendar v-model="showCalendar" ref="uCalendar" safeAreaInsetBottom mode="range" start-text="开始" end-text="结束"
      active-bg-color="#7063d2" active-color="#fff" range-bg-color="#e5e2ff" range-color="#7063d2"
      :customStyle="{ background: 'linear-gradient(90deg, #A36FFF, #5336FF)', boxShadow: '0 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34)' }"
      @change="selDate"></u-calendar>
  </view>
</template>

<script>
  import {
    mapState,
    mapActions
  } from 'vuex';
  export default {
    components: {},
    data() {
      return {
        money1: 800,
        isEmpty: false,
        stateCurrent: 'all', //默认
        statusList: [{
            name: '全部',
            value: 'all'
          },
          {
            name: '收入',
            value: 'add'
          },
          {
            name: '支出',
            value: 'reduce'
          }
        ],
        showMoney: true,
        //日期选择
        showCalendar: false,
        selDateText: '',
        walletLog: [], //钱包记录
        propsDate: '', //日期参数
        incomeMoney: '', //收入
        expendMoney: '', //支出
        loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
        currentPage: 1,
        lastPage: 1,
        list: []
      };
    },
    computed: {
      ...mapState({
        userinfo: ({
          user
        }) => user.userInfo,
        isLogin: ({
          user
        }) => user.isLogin
      })
    },
    onShow() {
      this.isLogin && this.getUserInfo();
      this.getToday();
      this.currentPage = 1;
      this.lastPage = 1;
      this.walletLog = [];
      this.list = []
      this.getWalletLog();
    },
    // 触底加载更多
    onReachBottom() {
      if (this.currentPage < this.lastPage) {
        this.currentPage += 1;
        this.getWalletLog();
      }
    },
    methods: {
      ...mapActions(['getUserInfo']),
      //  今日
      getToday() {
        let now = new Date();
        let dateText = `${now.getFullYear()}/${now.getMonth() + 1}/${now.getDate()}`;
        this.selDateText = `${now.getFullYear()}.${now.getMonth() + 1}.${now.getDate()}`;
        this.propsDate = `${dateText}-${dateText}`;
      },
      // tab切换
      onTab(state) {
        console.log(state)
        if (this.stateCurrent !== state) {
          this.stateCurrent = state;
          this.currentPage = 1;
          // this.lastPage = 1;
          if (state === 'add') {
            this.walletLog = this.list.in_money;
          } else if (state == 'reduce') {
            this.walletLog = this.list.out_money;
          } else {
            this.walletLog = this.list.all_money;
          }
          // this.getWalletLog();
        }
      },
      // 日期选择
      selDate(e) {
        this.walletLog = [];
        this.currentPage = 1;
        this.lastPage = 1;
        this.selDateText = `${e.startYear}.${e.startMonth}.${e.startDay}-${e.endYear}.${e.endMonth}.${e.endDay}`;
        let dateText = `${e.startYear}/${e.startMonth}/${e.startDay}-${e.endYear}/${e.endMonth}/${e.endDay}`;
        this.propsDate = dateText;
        this.getWalletLog();
        this.$refs.uCalendar.init();
      },
      // 钱包明细
      getWalletLog() {
        let that = this;
        that.loadStatus = 'loading';
        that.$http('money.walletLog', {
          // wallet_type: 'money',
          // status: that.stateCurrent,
          // date: that.propsDate,
          // page: that.currentPage
        }).then(res => {
          if (res.code === 1) {
            this.list = res.data;
            this.walletLog = this.list.all_money;
            // that.walletLog  = [...that.walletLog, ...this.list.all_score];
            // that.incomeMoney = res.data.income;
            // that.expendMoney = Math.abs(res.data.expend);
            // that.isEmpty = !that.walletLog.length;
            // that.lastPage = res.data.wallet_logs.last_page;
            // that.loadStatus = that.currentPage < res.data.wallet_logs.last_page ? 'loadmore' : 'nomore';
          }
        });
      }
    }
  };
</script>

<style lang="scss">
  // 钱包记录
  .wallet-list {
    width: 750rpx;
    padding: 30rpx;
    background-color: #ffff;
    border-bottom: 1rpx solid #eeeeee;

    .head-img {
      width: 70rpx;
      height: 70rpx;
      border-radius: 50%;
      background: #ccc;
    }

    .list-content {
      justify-content: space-between;
      align-items: flex-start;
      flex: 1;

      .title {
        font-size: 28rpx;
        color: #333;
        width: 400rpx;
      }

      .time {
        color: #c0c0c0;
        font-size: 22rpx;
      }
    }

    .money {
      font-size: 28rpx;
      font-weight: bold;

      .add {
        color: #FA6E3F;
      }

      .minus {
        color: #333333;
      }
    }
  }

  // 钱包
  .head_box {
    width: 750rpx;
    background-color: #fff;
    padding: 30rpx 0;

    .card-box {
      width: 690rpx;
      min-height: 300rpx;
      padding: 40rpx;
      background: linear-gradient(to right, #FA6E3F, #FEAB55);
      background-size: 100% 100%;
      box-shadow: 1rpx 5rpx 16rpx 0 #FA6E3F;
      border-radius: 30rpx;
      overflow: hidden;
      position: relative;

      .card-head {
        color: #fff;
        font-size: 30rpx;
      }

      .money-num {
        font-size: 70rpx;
        line-height: 70rpx;
        font-weight: 500;
        color: #ffffff;
      }

      .reduce-num {
        font-size: 26rpx;
        font-weight: 400;
        color: #ffffff;
      }

      .withdraw-btn {
        width: 120rpx;
        height: 60rpx;
        line-height: 60rpx;
        background: #ffffff;
        border-radius: 30px;
        font-size: 24rpx;
        font-weight: 500;
        color: #FA6E3F;
        position: absolute;
        right: 30rpx;
        top: 40rpx;
      }
    }
  }

  //奖励
  .reward {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    color: #fff;
    text-align: center;
    padding: 30rpx;

    .left_group {
      background: linear-gradient(to right, #FA6E3F, #FEAB55);
      box-shadow: 1rpx 5rpx 16rpx 0 #FA6E3F;
      border-radius: 25rpx;
      width: 32%;
      // height: 150rpx;
      padding: 30rpx 0;

      .money {
        font-size: 40rpx;
        margin-top: 20rpx;
      }
    }
  }


  // 筛选

  .filter-box {
    // height: 120rpx;
    padding: 0 30rpx;
    background-color: #f6f6f6;

    .date-btn {
      background-color: #fff;
      line-height: 54rpx;
      border-radius: 27rpx;
      padding: 0 20rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #666666;
    }

    .total-box {
      font-size: 24rpx;
      font-weight: 500;
      color: #999999;
    }
  }

  // 分类
  .state-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-bottom: 1rpx solid rgba(#999, 0.5);

    .state-title {
      color: #666;
      font-weight: 500;
      font-size: 28rpx;
      line-height: 90rpx;
    }

    .title-active {
      color: #333;
    }

    .underline {
      display: block;
      width: 68rpx;
      height: 4rpx;
      background: #fff;
      border-radius: 2rpx;
    }

    .underline-active {
      background: #FA6E3F;
      display: block;
      width: 68rpx;
      height: 4rpx;
      border-radius: 2rpx;
    }
  }
</style>
